<template>
    <div >
        <h3 ref="target">holle word</h3>
    </div>
</template>
<script>
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export default {
  setup () {
    const target = ref(null)
    const targetIsVisible = ref(false)
    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
        console.log(targetIsVisible.value)
        if (targetIsVisible.value) {
          stop()
        }
      }
    )

    return {
      target,
      targetIsVisible
    }
  }
}
</script>
<style lang="less" scoped>
div{
    width: 500px;
    height: 4000px;
    padding-top:2000px ;
}
h3{
    color: aqua;
}
</style>
